<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>富文本编辑器</title>
	<link rel="stylesheet" href="/static/component/layui/css/layui.css" />

	<style>
		body{margin: 10px;}
	</style>
</head>
<body style="background-color:#ffffff!important">
	<div class="layui-row">
		<form class="layui-form" style="margin-left: 20px;margin-right: 20px" action="" lay-filter="createCarousel">

			<div class="layui-form-item">
				<div class="layui-input-inline">
					<input type="text" name="url" lay-verify="required" placeholder="图片地址" autocomplete="off" class="layui-input layui-col-lg3">
				</div>
				<div class="layui-input-inline">
					<a class="layui-btn layui-btn-normal" id="upload">
						<i class="layui-icon layui-icon-upload-circle"></i>
						上传
					</a>
				</div>
			</div>

			<div class="layui-form-item">
				<input type="text" name="href" placeholder="跳转地址" autocomplete="off" class="layui-input">
			</div>

			<div class="layui-form-item">
				<div class="layui-input-inline">
					<input type="text" name="start_at" id="start_at" lay-verify="required" placeholder="开始时间" autocomplete="off" class="layui-input layui-col-lg3">
				</div>
				<div class="layui-input-inline">
					<input type="text" name="end_at" id="end_at" lay-verify="required" placeholder="结束时间" autocomplete="off" class="layui-input layui-col-lg3">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
				</div>
			</div>
		</form>
	</div>

<script src="/static/component/layui/layui.js"></script>
<script src="/static/blog/jquery-3.1.1.min.js"></script>

<script>

	layui.use(['util', 'layer','form', 'upload', 'laydate'], function () {
		var util = layui.util;
		var form = layui.form;
		var layer = layui.layer;
		let upload = layui.upload;
		let laydate = layui.laydate;

		laydate.render({
			elem: '#start_at' //指定元素
			,value: new Date()
		});

		laydate.render({
			elem: '#end_at' //指定元素
			,value: new Date(2050,12,31,23,59,59)
		});

		upload.render({
			elem: '#upload' //绑定元素
			,url: '/api/admin/resource/upload' //上传接口
			,field: "editormd-image-file"
			,accept: "images"
			,done: function(res){
				if (res.success) {
					form.val("createCarousel", {'url': res.url})
				} else {
					layer.msg(res.message)
				}
			}
			,error: function(){
				//请求异常回调
			}
		});

		form.on('submit(submit)', function(data){

			$.ajax({
				url: '/api/admin/carousel/create',
				type: 'post',
				data: JSON.stringify(data.field),
				dataType: "json",
				contentType: 'application/json',
				success: function (response) {
					if (response.code === 1) {
						layer.alert(response.msg);
					} else {
						let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
						parent.layer.close(index); //再执行关闭
					}
				}
			});
			return false;
		});

	});
</script>
</body>
</html>